<template>
  <div class="order_wrapper">
    <div class="order_list" v-load-more="loaderMore" v-if="orderList">
      <div class="order_item" v-for="item in orderList" :key="item.id" @click.stop="showDetail(item)">
        <div class="con">
          <div class="ordercard_avatar">
            <img class="ordercard-logo" :src="imgBaseUrl + item.restaurant_image_url">
          </div>
          <div class="order_info">
            <div class="ordercard_head">
              <div class="title">
                <div class="name">
                  <span class="content">{{item.restaurant_name}}</span>
                  <span class="iconfont arrow">&#xe63c;</span>
                </div>
                <p class="status">{{item.status_bar.title}}</p>
              </div>
              <p class="datetime">{{item.formatted_created_at}}</p>
            </div>
            <div class="ordercard_detail">
              <p class="detail">
                <span class="productname">{{item.basket.group[0][0].name}}{{item.basket.group[0].length > 1 ? ' 等' + item.basket.group[0].length + '件商品' : ''}}</span>
                <span></span>
              </p>
              <p class="price">¥{{item.total_amount.toFixed(2)}}</p>
            </div>
          </div>
        </div>
        <div class="ordercard_bottom">
          <compute-time v-if="item.status_bar.title == '等待支付'" :time="item.time_pass"></compute-time>
            <button v-else class="cardbutton" @click.stop="">
              <router-link :to="{path: '/shop', query: {geohash, id: item.restaurant_id}}" tag="span">
                再来一单
              </router-link>
            </button>
        </div>
      </div>
    </div>
    <no-result v-else>
      <h3 slot="title">登录后查看外卖订单</h3>
      <span slot="btn_text">立即登录</span>
    </no-result>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
    <transition name="loading">
      <loading v-show="showLoading"></loading>
    </transition>
    <order-footer></order-footer>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import { loadMore } from '@/assets/js/mixin'
import OrderFooter from '@/components/footer/Footer'
import ComputeTime from '@/components/common/ComputeTime'
import loading from '@/components/common/Loading'
import NoResult from '@/components/common/NoResult'
export default {
  name: 'Order',
  components: {
    OrderFooter,
    ComputeTime,
    loading,
    NoResult
  },
  data () {
    return {
      orderList: null, // 订单列表
      offset: 0,
      preventRepeat: false, // 防止重复获取
      showLoading: true, // 显示加载动画
      imgBaseUrl: 'https://elm.cangdu.org/img/'
    }
  },
  mounted () {
    // 获取用户信息
    this.getUserInfo()
    this.initData()
  },
  mixins: [loadMore],
  computed: {
    ...mapState(['userInfo', 'geohash'])
  },
  methods: {
    ...mapActions(['getUserInfo']),
    ...mapMutations(['SAVE_ORDER']),

    // 初始化获取信息
    initData () {
      if (this.userInfo && this.userInfo.user_id) {
        this.$api.home.getOrderList(this.userInfo.user_id, this.offset).then(res => {
          this.orderList = res.data
          this.hideLoading()
        })
      } else {
        this.hideLoading()
      }
    },
    // 加载更多数据
    loaderMore () {
      // 防止重复请求
      if (this.preventRepeat) {
        return
      }
      this.showLoading = true
      this.preventRepeat = true

      // 数据的定位加10位
      this.offset += 10
      this.$api.home.getOrderList(this.userInfo.user_id, this.offset).then(res => {
        this.hideLoading()
        this.orderList = [...this.orderList, ...res.data]
        // 当获取数据小于10，说明没有更多数据，不需要再次请求数据
        if (res.data.length < 10) {
          return
        }
        this.preventRepeat = false
      })
    },
    // 显示详情页
    showDetail (item) {
      this.SAVE_ORDER(item)
      this.preventRepeat = false
      this.$router.push('/order/detail')
    },
    // 生产环境与发布环境隐藏loading方式不同
    hideLoading () {
      this.showLoading = false
    }
  },
  watch: {
    userInfo (value) {
      if (value && value.user_id && !this.orderList) {
        this.initData()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .order_wrapper >>> .no_result
    margin-top: 2rem
  .order_wrapper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    overflow-y: auto
    background-color: #f2f2f2
    .order_list
      padding-bottom: 1rem
      .order_item
        display: block
        margin-top: .2rem
        background-color: #fff
        padding: .28rem 0 0 .3rem
        .con
          display: flex
          .ordercard_avatar
            position: relative
            padding-right: .2rem
            flex: none
            height: .65rem
            img
              border-radius: .05rem
              border: 1px solid #eee
              width: .65rem
              height: .65rem
          .order_info
            flex: 1
            .ordercard_head
              border-bottom: 1px solid #f9f9f9
              padding-right: .2rem
              padding-bottom: .26rem
              .title
                display: flex
                align-items: center
                justify-content: space-between
                .name
                  display: flex
                  align-items: center
                  font-size: .32rem
                  line-height: 1.5em
                  color: #333
                  span
                    display: inline-block
                    max-width: 3.2rem
                    ellipsis()
                  .arrow
                    font-size .24rem
                    color: #bbb
                .status
                  font-size: .26rem
                  text-align: right
                  color: #333
                  ellipsis()
              .datetime
                font-size: .24rem
                color: #999
            .ordercard_detail
              display: flex
              justify-content: space-between
              padding: .3rem .26rem .3rem 0
              .detail
                font-size: .26rem
                color: #666
                display: flex
                align-items: center
              .price
                text-align: right
                font-size: .26rem
                color: #333
                font-weight: 700
        .ordercard_bottom
          display: flex
          border-top: .01rem solid #f9f9f9
          padding: .2rem .32rem
          justify-content: flex-end
          .cardbutton
            padding: .1rem .2rem
            border: .01rem solid #2395ff
            border-radius: .05rem
            background-color: transparent
            outline: none
            font-size: .26rem
            margin-left: .15rem
            span
              color: #2395ff
    .router-slid-enter-active, .router-slid-leave-active
        transition: all .4s
    .router-slid-enter, .router-slid-leave-active
        transform: translate3d(2rem, 0, 0)
        opacity: 0
    .loading-enter-active, .loading-leave-active
      transition: opacity 1s
    .loading-enter, .loading-leave-active
      opacity: 0
</style>
